<template>
  <q-select
    v-model="language"
    color="white"
    outlined
    dark
    :options="languages"
    :option-value="opt => opt.symbol"
    :option-label="opt => opt.name"
    options-selected-class="text-yellow"
    :label="$t('language')"
    label-color="white"
    bg-color="grey-10"
    behavior="menu"
  >
    <template class="q-pa-none" v-slot:prepend>
      <div class="q-pb-sm row items-start">
        <q-img :src="language.icon" height="22px" width="18px" />
      </div>
    </template>
    <template v-slot:option="scope">
      <q-item class="bg-grey-8" v-bind="scope.itemProps">
        <q-item-section>
          <q-item-label v-html="'+' + String(scope.opt.symbol)" />
          <q-item-label caption v-text="scope.opt.name" />
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script lang="ts">

import { defineComponent, ref } from 'vue'

interface LanguageInterface {
  name: string,
  symbol: string,
  icon: string
}

const languages : LanguageInterface[] = [
  {
    name: 'UA',
    symbol: '380',
    icon: ''
  },
  {
    name: 'RU',
    symbol: '7',
    icon: ''
  },
  {
    name: 'BY',
    symbol: '375',
    icon: ''
  }
]

export default defineComponent({
  name: 'CountryCodeSelect',

  /* computed: {
    countryCode: {
      get () {
        const symbol = this.$store.getters['settings/language']
        const retLng = this.languages.find((l) => l.symbol === symbol) as LanguageInterface
        return retLng
      },
      async set (value: LanguageInterface) {
        await this.$store.dispatch('settings/setLanguage', value.symbol)
      }
    }
  }, */

  setup () {
    const countryCode = ref(languages[0])
    return { languages, countryCode }
  }
})
</script>
